<style scoped>
    .fill-item{height:50px;padding:0 10px;}
    .fill-item input{border:0;height:100%;text-align:right;width:200px;}
    .fill-item .select-box{height:100%;}
    .fill-item select{border:0;height:100%;position:absolute;top:0;right:10px;min-width:200px;opacity: 0;}
    .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
    .remark{width:100%;border:0;height: 50px;line-height: 50px;resize : none;}
</style>
<template>
  <wrap title="填写用户资料">
    <div slot="page">
      <fill-progress :step="2"></fill-progress>
      <div class="fill-box light-bg margin-bottom">
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">三个月内是否在其他平台申请贷款</span>
          <div class="select-box flex flex-center">
            <span class="font-15">{{basic.loanInThreeMonth==1?'是':'否'}}</span>
            <select v-model="basic.loanInThreeMonth">
              <option value="1">是</option>
              <option value="2">否</option>
            </select>
            <i class="fa fa-angle-right grey-9" style="font-size:24px;margin-left:5px;" aria-hidden="true"></i>
          </div>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center" v-if="basic.loanInThreeMonth==1">
          <span class="font-15">借款笔数</span>
          <input class="font-15" v-model="basic.loanInThreeMonthTimes" type="text" placeholder="请填写借款笔数">
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">最高学历</span>
          <i-select v-model="basic.educationCode" :option="basic.educationList"></i-select>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">毕业院校</span>
          <input class="font-15" v-model="basic.graduateSchool" type="text" placeholder="请填写毕业院校">
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">婚姻情况</span>
          <i-select v-model="basic.marriageCode" :option="basic.marryList"></i-select>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">月收入</span>
          <i-select v-model="basic.monthIncomeCode" :option="basic.incomeList"></i-select>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">现住房情况</span>
          <i-select v-model="basic.houseSourceCode" :option="basic.housingList"></i-select>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">现住房区域</span>
          <div class="select-box flex flex-justify-end flex-align-center pointer" style="width:200px;" @click="showCity=true">
            <span class="font-15">{{basic.houseCountyName==''?'请选择':basic.houseProvinceName+basic.houseCityName+basic.houseCountyName}}</span>
            <i class="fa fa-angle-right grey-9" style="font-size:24px;margin-left:5px;" aria-hidden="true"></i>
          </div>
          <city v-if="showCity" @close="showCity=false" @success="cityChange"></city>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">详细地址</span>
          <input class="font-15" v-model="basic.houseAddress" type="text" placeholder="请填写详细地址">
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">家庭电话</span>
          <input class="font-15" v-model="basic.houseTel" type="number" placeholder="请填写家庭电话（选填）">
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">  
          <textarea class="font-15 remark" v-model="basic.remark" type="text" @keyup="textchange"  placeholder="请填写会员想要购买的商品"/>
        </div>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'blue-bg':'grey-9-bg','font-16']" @click="next()">下一步</a>
      <div class="flex flex-center" style="padding-bottom:20px;">
        <a href="javascript:;" class="blue" @click="refuse">拒绝该用户的申请</a>
      </div>
    </div>
  </wrap>
</template>
<script>
    import mixins from '~/mixins'
    import wrap from '~/components/wrap.vue'
    import iSelect from '~/components/i-select.vue'
    import city from '~/components/city.vue'
    import fillProgress from './progress.vue'
    export default {
      mixins: [mixins],
      components: {wrap, iSelect, city, fillProgress},
      data () {
        return {
          userId: 1717482,
          nextEnable: false,
          showCity: false,
          basic: {
            loanInThreeMonth: 2,
            loanInThreeMonthTimes: '',
            educationCode: 0,
            educationList: [
                        {value: 0, text: '请选择学历'}
            ],
            graduateSchool: '',
            marriageCode: 0,
            marryList: [
                        {value: 0, text: '请选择婚姻状况'}
            ],
            monthIncomeCode: 0,
            incomeList: [
                        {value: 0, text: '请选择月收入'}
            ],
            houseSourceCode: 0,
            housingList: [
                        {value: 0, text: '请选择现住房情况'}
            ],
            houseProvinceCode: 1,
            houseCityCode: 1,
            houseCountyCode: 1,
            houseProvinceName: '',
            houseCityName: '',
            houseCountyName: '',
            houseAddress: '',
            houseTel: '',
            remark: ''
          }
        }
      },
      created () {
        const self = this
        self.userId = self.$route.params.userId
        self.orderId = self.$route.params.orderId
        self.request({act: 'getBasic', body: {platUserId: self.userId}}).then(res => {
          if (res.code === 0) {
            self.basic = res.data
          } else {
            /* eslint-disable*/
            layer.open({content: res.userMsg, skin: 'msg', time: 2})
          }
        })
        self.$watch('basic', () => {
          if (self.basic.loanInThreeMonth > 0 && self.basic.educationCode && self.basic.graduateSchool && self.basic.marriageCode && self.basic.monthIncomeCode && self.basic.houseSourceCode && parseInt(self.basic.houseCountyCode) && self.basic.houseAddress && self.basic.remark ) {
            self.nextEnable = true         
          } else {
            self.nextEnable = false
          }
        }, {deep: true})
      },
      methods: {
        textchange(){
        let self=this
         if (self.basic.loanInThreeMonth > 0 && self.basic.educationCode && self.basic.graduateSchool && self.basic.marriageCode && self.basic.monthIncomeCode && self.basic.houseSourceCode && parseInt(self.basic.houseCountyCode) && self.basic.houseAddress && self.basic.remark ) {
            self.nextEnable = true
          
          } else {
            self.nextEnable = false
          }
        },
        cityChange (res) {
          this.basic.houseProvinceCode = res.provinceId
          this.basic.houseCityCode = res.cityId
          this.basic.houseCountyCode = res.countyId
          this.basic.houseProvinceName = res.provinceName
          this.basic.houseCityName = res.cityName
          this.basic.houseCountyName = res.countyName
          this.showCity = false
        },
        next () {
          const self = this
          if (!self.nextEnable) {
            return
          }
          if (self.basic.loanInThreeMonth == 1 && self.basic.loanInThreeMonthTimes < 1) {
            layer.open({content: '请填写贷款笔数', skin: 'msg', time: 2})
            return
          }
          layer.open({type: 2, shadeClose: false})
          this.request({
            act: 'saveBasic',
            body: self.basic
          }).then(res => {
            layer.closeAll()
            if (res.code == 0) {
              self.$router.push('/fill/job/' + self.userId + '-' + self.orderId)
            } else {
              layer.open({content: res.userMsg, skin: 'msg', time: 2})
            }
          }, e => {
            layer.open({content: e.status + ' ' + e.statusText, skin: 'msg', time: 2})
          })
        }
      }
    }
</script>
